<template>
<div class="history">
  <van-cell-group>
    <van-cell title="搜索内容">
      <div class="history_right">
        <van-icon name="delete" @click="isShowDelete = true"></van-icon>
        <div v-if="isShowDelete">
        <span @delHistory="history.splice(0)">全部删除</span>
        <span @click="isShowDelete = false" style="margin-left: 8px;">完成</span>
        </div>
      </div>
    </van-cell>
    <van-cell
    v-for="(item, index) in history"
    :key="item"
    :title="item"
    @click="deleteHistory(index, item)">
      <van-icon name="close"></van-icon>
    </van-cell>
  </van-cell-group>
  <van-empty v-if="!history.length" image="error" description="暂无搜索历史" />
</div>
</template>

<script>
export default {
  props: {
    history: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      isShowDelete: false

    }
  },

  created () {

  },

  methods: {
    // 点击删除历史
    deleteHistory (index, searchValue) {
      if (this.isShowDelete) {
        // 删除
        //  当父组件传递过来是值时，不可以对值进行修改
        // 当父组件传递过来是复杂数据类型时，不可以直接赋值，但是可以修改内部数据类型
        this.history.splice(index, 1)
      } else {
        // 搜索
        this.$emit('search', searchValue)
      }
    }
  }
}
</script>

<style scoped lang='less'>

</style>
